import React, {useEffect, useState} from 'react';
import {View, Text, StyleSheet, StatusBar} from 'react-native';
import {PermissionsAndroid, Platform} from 'react-native';
import {init, Geolocation} from 'react-native-amap-geolocation';
import Touchable from '../../components/Touchable';
import {MapView, MapType, Marker, Cluster} from 'react-native-amap3d';
import IconFont, {IconNames} from '../../assets/iconfont';
import AsyncStorage from '@react-native-async-storage/async-storage';
interface ILocation {
  latitude: number;
  longitude: number;
}
/*
写一下地图查找摄影师模块思路，没时间了，后面再看看能不能补：
1:用户在首页如果点击了开启定位，可以获取用户的经纬度信息，保存在user表中
2:在进入Map时候查询出所有具有经纬度信息的用户
3:将用户的经纬度和登录者的经纬度信息传进react-native-amap-geolocation提供的反地址编码函数里面计算二者之间的距离
4:如果该距离小于10千米，那么把这个用户的username和经纬度信息单独保存起来
5:利用点聚合的方式渲染覆盖物，经纬度可以直接传进Marker的position属性
6:给覆盖物添加onPress事件，当登录者点击覆盖物时携带username跳转到主页，在主页查出该摄影师的相关信息进行展示
*/
// function getDistance(start, end) {
//   var lon1 = (Math.PI / 180) * start.longitude;
//   var lat1 = (Math.PI / 180) * start.latitude;

//   var lon2 = (Math.PI / 180) * end.longitude;
//   var lat2 = (Math.PI / 180) * end.latitude;

//   // 地球半径
//   var R = 6371;

//   // 两点间距离 KM
//   var d = Math.acos(Math.sin(lat1) * Math.sin(lat2) + Math.cos(lat1) * Math.cos(lat2) * Math.cos(lon2 - lon1)) * R;

//   // 公里转米
//   var abs = Math.abs(d * 1000);

//   return Math.round(abs);
// }

// var start = {longitude: 120.109594, latitude: 30.282075};
// var end = {longitude: 120.117919, latitude: 30.282335};

// var m = getDistance(start, end);

// console.log(m);// 800米
const Map = () => {
  const [location, setLocation] = useState<ILocation>();
  const [username, setUsername] = useState<string>('');
  const getUsername = async () => {
    let currentUserInfo = await AsyncStorage.getItem('currentUserInfo');
    if (currentUserInfo) {
      JSON.parse(currentUserInfo) &&
        JSON.parse(currentUserInfo).username &&
        setUsername(JSON.parse(currentUserInfo).username);
    }
  };
  useEffect(() => {
    Geolocation.getCurrentPosition(({coords}) => {
      console.log('coords111111111111', coords);
      let location = {
        latitude: coords.latitude,
        longitude: coords.longitude,
      };
      setLocation(location);
    });
    getUsername();
  }, []);
  // const obj: any = {
  //   0: 'LiangLiang1812',
  //   1: '赵敏',
  //   2: 'KLiang',
  //   3: '聂小倩',
  //   4: 'Liang',
  // };
  // // 使用点聚合渲染覆盖物
  // const markers = Array(5)
  //   .fill(0)
  //   .map((_, i) => ({
  //     position: {
  //       latitude: 39.0 + Math.random(),
  //       longitude: 117.0 + Math.random(),
  //     },
  //     properties: {key: `Marker${i}`},
  //     username: obj[i] && obj[i],
  //   }));
  return (
    <View style={styles.mapBox}>
      <StatusBar backgroundColor="#fff" barStyle="dark-content" />
      <MapView
        mapType={MapType.Standard}
        initialCameraPosition={{
          target: {
            latitude: location?.latitude ? location?.latitude : 39.095042,
            longitude: location?.longitude ? location?.longitude : 117.095545,
          },
          zoom: 15,
        }}>
        {/* <Cluster
          // ref={(ref) => (cluster.current = ref)}
          points={markers}
          renderMarker={item => (
            <Marker key={item.properties.key} position={item.position}>
              <Text style={styles.marker}>{username}</Text>
            </Marker>
          )}
        ></Cluster> */}
        <Marker
          position={{
            latitude: location?.latitude ? location?.latitude : 39.095042,
            longitude: location?.longitude ? location?.longitude : 117.095545,
          }}>
          <Text style={styles.marker}>{username}</Text>
        </Marker>
        <Marker
          position={{
            latitude: (location?.latitude ? location?.latitude : 39.095042)+Math.random()*0.01,
            longitude: (location?.longitude ? location?.longitude : 117.095545)+Math.random()*0.01,
          }}>
          <Text style={styles.marker}>LiangLiang</Text>
        </Marker>
        <Marker
          position={{
            latitude: (location?.latitude ? location?.latitude : 39.095042)-Math.random()*0.01,
            longitude: (location?.longitude ? location?.longitude : 117.095545)-Math.random()*0.01,
          }}>
          <Text style={styles.marker}>LiangLiang1812</Text>
        </Marker>
          <Marker
          position={{
            latitude: (location?.latitude ? location?.latitude : 39.095042)+Math.random()*0.01,
            longitude: (location?.longitude ? location?.longitude : 117.095545)+Math.random()*0.01,
          }}>
          <Text style={styles.marker}>赵敏</Text>
        </Marker>
        <Marker
          position={{
            latitude: (location?.latitude ? location?.latitude : 39.095042)-Math.random()*0.01,
            longitude: (location?.longitude ? location?.longitude : 117.095545)-Math.random()*0.01,
          }}>
          <Text style={styles.marker}>聂小倩</Text>
        </Marker>
        <Marker
          position={{
            latitude: (location?.latitude ? location?.latitude : 39.095042)+Math.random()*0.01,
            longitude: (location?.longitude ? location?.longitude : 117.095545)+Math.random()*0.01,
          }}>
          <Text style={styles.marker}>KK</Text>
        </Marker>
      </MapView>
    </View>
  );
};
const styles = StyleSheet.create({
  mapBox: {
    flex: 1,
    width: '100%',
    height: '100%',
  },
  marker: {
    width: 60,
    height: 60,
    borderRadius: 60,
    borderColor: '#fff',
    borderWidth: 3,
    // backgroundColor: '#082077',
    backgroundColor:"#A75E5E",
    shadowColor: '#fff',
    shadowOffset: {width: 10, height: 10},
    shadowOpacity: 0.6,
    shadowRadius: 20,
    color: '#fff',
    textAlign: 'center',
    lineHeight: 60,
  },
});
export default Map;
